<template>
    <div>
        <VanNavBar title="商品分类" left-arrow>
            <template #left>
                <RouterLink to="/home/index">
                    <VanIcon color="#000" name="wap-home-o" size="20" @click="replaceDoc"/>
                </RouterLink>
            </template>
        </VanNavBar>
        <VanSearch
        v-model="value"
        shape="round"
        background="#fefefe"
        placeholder="请输入搜索关键词"
        />
        <div style="display: flex;margin-top: 100px;">
            <van-tree-select
                v-model:main-active-index="activeIndex"
                height="55vw"
                :items="items"
            />
            <div style="
            height: 100.2vh;
            overflow: scroll;">
                <ul>
                    <li class="shopShop" v-for="item in shops" :key="item.id">
                        <img :src="item.photo" alt="" style="width: 100px;height: 100px;">
                        <div class="shopListR">
                            <span class="jieshao">{{ item.jieshao }}</span>
                            <div class="duanju">{{ item.duanju }}</div>
                            <!-- 弹出框 -->
                            <div style="color: red;margin-top: 18px;display: flex;justify-content: space-between;">
                                <span class="price">￥{{ item.price }}</span>
                                <van-cell @click="showPopup">
                                    <van-icon name="cart-circle-o" color="red" size="30px"/>
                                </van-cell>
                                 <van-popup
                                    v-model:show="show"
                                     position="bottom"
                                    :style="{ height: '50%' }"
                                    round
                                    closeable
                                >
                                    <div class="shopShop">
                                        <img :src="item.photo" alt="" style="width: 100px;height: 100px;">
                                        <div class="shopListR">
                                            <span class="jieshao" style="color: #000;">{{ item.jieshao }}</span>
                                            <div class="duanju">{{ item.duanju }}</div>

                                            <div style="color: red;margin-top: 18px;display: flex;justify-content: space-between;">
                                                <span class="price">￥{{ item.price }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="margin: 10px;">
                                        <span style="color:#000;font-size: 30px;">口味</span>
                                        <div style="width: 50%;background: #FFECEC;height: 30px;line-height: 30px;padding: 5px;border-radius: 2px;margin:10px 0;color:#FF4444;">
                                            ￥{{ item.price }}
                                        </div>
                                        <div style="display: flex;justify-content: space-between;">
                                            <span style="color: #000;">购买数量</span>
                                            <van-stepper v-model="valuestepper" />
                                        </div>
                                        <div style="color: #000;">
                                            <span>总价:</span>
                                            <span style="color: red;">{{ valuestepper*item.price }}元</span>
                                            <van-action-bar>
                                                <van-action-bar-button type="warning" text="加入购物车" />
                                                <van-action-bar-button type="danger" text="立即购买" @click="showGM"/>
                                                <van-popup v-model:show="showG">
                                                    <img src="@/assets/lb2.jpg" alt="" style="width: 100px;height: 100px;">
                                                </van-popup>
                                            </van-action-bar>
                                        </div>
                                    </div>
                                 </van-popup>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref,reactive } from 'vue';
    import Shop from '../types/Shop'
    import URLENV from '../http/IndexUrl'
    import httpApi from '../http/httpApi';
    //主页链接
    const {INDEXURL} = URLENV
    const replaceDoc=()=>{
        window.location.replace(INDEXURL)
    }
    //搜索框内容
    const value = ref('');
    // 分类选择
    const activeIndex = ref(0);
    const items= [
        { text: '气泡水' },
        { text: '电解质水' },
        { text: '燃茶' }, 
        { text: '纤茶'  },
        { text: '乳茶' }, 
        { text: '北海牧场' },
        { text: '满分' },
        { text: '维c水' }, 
        { text: '冰茶'  },
        { text: '最喜' }, 
        { text: '浪' },];
    // 接口数据
    const shops = reactive<Shop[]>([])
    const listShops=()=>{
        httpApi.shopApi.queryAll().then(res=>{
            shops.push(...res.data.data)
            console.log(res);
        })
    }
    listShops()
    //弹出框
    const valuestepper=ref(1)
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    const showG=ref(false)
    const showGM=()=>{
        showG.value = true;
    }
</script>

<style scoped lang="scss">
    .van-search{
        width: 100%;
        position: fixed;
        top: 46px;
        z-index: 10000;
    }
    .van-nav-bar{
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 10000;
    }
    .van-tree-select{
        display: block;
        flex-wrap: nowrap;
        // margin-top: 100px;
        height: 100vh !important;
        background: #f7f8fa;
    }
    .van-cell{
        width: 30px;
        height: 30px;
        padding: 0;
    }
        .shopShop{
            display: flex;
            padding: 10px;
            padding-left: 0;
            width: 80vw;
            .shopListR{
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin:0 10px;
                width: 100%;
                .jieshao{
                    font-size: 18px;
                }
                .duanju{
                    color: #999;
                }
                .price{
                    font-size: 22px;
                }
            }
        }
</style>